<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>行业管理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>

</head>

<body class="gray-bg">
    <div class="row border-bottom white-bg dashboard-header">
        <div id="main" style="height:400px;" class="col-sm-6"></div>
        <div id="main2" style="height:400px;" class="col-sm-6"></div>

    </div>
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-4">

                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>线路统计</h5>
                    </div>
                    <div  id="main3"  style="height:450px;" class="ibox-content">
						<!--todo 3-->
					</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>每日客流总统计</h5>
                    </div>
                    <div id="main4" style="height:450px;" class="ibox-content">

                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>站点线路关系</h5>
                    </div>
                    <div id="main5" style="height:450px;" class="ibox-content">
						<!--todo 2-->
					</div>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/echarts.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script type="text/javascript">



        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                left: 'center',
                text: '线路运营总里程'
            },
            dataset: [
                {
                    dimensions: ['name', 'age', 'profession', 'score', 'date'],
                    source: [
                        ['1路', 41, 'Engineer', 314, '2011-02-12'],
                        ['203路', 20, 'Teacher', 351, '2011-03-01'],
                        ['环路 ', 52, 'Musician', 287, '2011-02-14'],
                        ['302路', 37, 'Teacher', 219, '2011-02-18'],
                        ['11路', 25, 'Engineer', 253, '2011-04-02'],
                        ['9路', 19, 'Teacher', 300, '2011-01-16'],
                        ['103路', 71, 'Engineer', 165, '2011-03-19'],
                    ]
                },
                {
                    transform: {
                        type: 'sort',
                        config: { dimension: 'score', order: 'desc' }
                    }
                }
            ],
            xAxis: {
                type: 'category',
                axisLabel: { interval: 0, rotate: 30 }
            },
            yAxis: {},
            series: {
                type: 'bar',
                encode: { x: 'name', y: 'score' },
                datasetIndex: 1
            }
        };

        option && myChart.setOption(option);





        var myChart2 = echarts.init(document.getElementById('main2'));
        var option2 = {
            title: {
                left: 'center',
                text: '公交车平均时速'
            },
            series: [
                {
                    type: 'gauge',
                    axisLine: {
                        lineStyle: {
                            width: 30,
                            color: [
                                [0.3, '#67e0e3'],
                                [0.7, '#37a2da'],
                                [1, '#fd666d']
                            ]
                        }
                    },
                    pointer: {
                        itemStyle: {
                            color: 'auto'
                        }
                    },
                    axisTick: {
                        distance: -30,
                        length: 8,
                        lineStyle: {
                            color: '#fff',
                            width: 2
                        }
                    },
                    splitLine: {
                        distance: -30,
                        length: 30,
                        lineStyle: {
                            color: '#fff',
                            width: 4
                        }
                    },
                    axisLabel: {
                        color: 'inherit',
                        distance: 40,
                        fontSize: 20
                    },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value} km/h',
                        color: 'inherit'
                    },
                    data: [
                        {
                            value: 70
                        }
                    ]
                }
            ]
        };
        setInterval(function () {
            myChart2.setOption({
                series: [
                    {
                        data: [
                            {
                                value: +(Math.random() * 30).toFixed(2)
                            }
                        ]
                    }
                ]
            });
        }, 2000);
        myChart2.setOption(option2);


        var myChart3 = echarts.init(document.getElementById('main3'));
        var option3 = {
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [30, 130],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                        { value: 40, name: '1路' },
                        { value: 38, name: '30路' },
                        { value: 32, name: '203路' },
                        { value: 30, name: '100路' },
                        { value: 28, name: '401路' },
                        { value: 26, name: '40路' },
                        { value: 22, name: '20路' },
                        { value: 18, name: '8路' }
                    ]
                }
            ]
        };

        myChart3.setOption(option3);



        var chartDom4 = document.getElementById('main4');
        var myChart4 = echarts.init(chartDom4);
        var option4;

        let base = +new Date(2000, 9, 3);
        let oneDay = 24 * 3600 * 1000;
        let date = [];
        let data = [Math.random() * 200];
        for (let i = 1; i < 8600; i++) {
            var now = new Date((base += oneDay));
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data.push(Math.abs(Math.round((Math.random() - 0.5) * 400 + data[i-1])));
        }
        option4 = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 10
                },
                {
                    start: 0,
                    end: 10
                }
            ],
            series: [
                {
                    name: '乘客总数',
                    type: 'line',
                    symbol: 'none',
                    sampling: 'lttb',
                    itemStyle: {
                        color: 'rgb(255, 70, 131)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(255, 158, 68)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(255, 70, 131)'
                            }
                        ])
                    },
                    data: data
                }
            ]
        };

        option4 && myChart4.setOption(option4);





        var chartDom5 = document.getElementById('main5');
        var myChart5 = echarts.init(chartDom5);
        var option5;

        myChart5.showLoading();
        $.getJSON(
            '../file/main5.json',
            function (json) {
                myChart5.hideLoading();
                myChart5.setOption(
                    (option = {
                        animationDurationUpdate: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        series: [
                            {
                                type: 'graph',
                                layout: 'none',
                                // progressiveThreshold: 700,
                                data: json.nodes.map(function (node) {
                                    return {
                                        x: node.x,
                                        y: node.y,
                                        id: node.id,
                                        name: node.label,
                                        symbolSize: node.size,
                                        itemStyle: {
                                            color: node.color
                                        }
                                    };
                                }),
                                edges: json.edges.map(function (edge) {
                                    return {
                                        source: edge.sourceID,
                                        target: edge.targetID
                                    };
                                }),
                                emphasis: {
                                    focus: 'adjacency',
                                    label: {
                                        position: 'right',
                                        show: true
                                    }
                                },
                                roam: true,
                                lineStyle: {
                                    width: 0.5,
                                    curveness: 0.3,
                                    opacity: 0.7
                                }
                            }
                        ]
                    }),
                    true
                );
            }
        );

        option5 && myChart5.setOption(option5);



    </script>
</body>
</html>
